<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php $_option = $block->getOption(); ?>
<?php $_fileInfo = $block->getFileInfo(); ?>
<?php $_fileExists = $_fileInfo->hasData() ? true : false; ?>
<?php $_fileName = 'options_' . $_option->getId() . '_file'; ?>
<?php $_fieldNameAction = $_fileName . '_action'; ?>
<?php $_fieldValueAction = $_fileExists ? 'save_old' : 'save_new'; ?>
<?php $_fileNamed = $_fileName . '_name'; ?>
<?php $_rand = rand(); ?>

<script>
require(['prototype'], function(){

//<![CDATA[
    opFile<?php /* @escapeNotVerified */ echo $_rand; ?> = {
        initializeFile: function(inputBox) {
            this.inputFile = inputBox.select('input[name="<?php /* @escapeNotVerified */ echo $_fileName; ?>"]')[0];
            this.inputFileAction = inputBox.select('input[name="<?php /* @escapeNotVerified */ echo $_fieldNameAction; ?>"]')[0];
            this.fileNameBox = inputBox.up('dd').select('.<?php /* @escapeNotVerified */ echo $_fileNamed ?>')[0];
        },

        toggleFileChange: function(inputBox) {
            this.initializeFile(inputBox);
            inputBox.toggle();
            this.fileChangeFlag = this.fileChangeFlag ? false : true;
            if (!this.fileDeleteFlag) {
                if (this.fileChangeFlag) {
                     this.inputFileAction.value = 'save_new';
                     this.inputFile.disabled = false;
                 } else {
                     this.inputFileAction.value = 'save_old';
                     this.inputFile.disabled = true;
                 }
            }
        },

        toggleFileDelete: function(fileDeleteFlag, inputBox) {
            this.initializeFile(inputBox);
            this.fileDeleteFlag = fileDeleteFlag.checked ? true : false;
            if (this.fileDeleteFlag) {
                this.inputFileAction.value = '';
                this.inputFile.disabled = true;
                this.fileNameBox.setStyle({'text-decoration': 'line-through'});
            } else {
                this.inputFileAction.value = this.fileChangeFlag ? 'save_new' : 'save_old';
                this.inputFile.disabled = (this.fileChangeFlag == 'save_old');
                this.fileNameBox.setStyle({'text-decoration': 'none'});
            }
        }
    };
//]]>

});
</script>

<div class="admin__field <?php if ($_option->getIsRequire()) echo ' required _required' ?>">
    <label class="admin__field-label label">
        <?php echo  $block->escapeHtml($_option->getTitle()) ?>
        <?php /* @escapeNotVerified */ echo $block->getFormatedPrice() ?>
    </label>
    <div class="admin__field-control control">
        <?php if ($_fileExists): ?>
            <span class="<?php /* @noEscape */ echo $_fileNamed ?>"><?php echo $block->escapeHtml($_fileInfo->getTitle()); ?></span>
            <a href="javascript:void(0)" class="label" onclick="opFile<?php /* @escapeNotVerified */ echo $_rand; ?>.toggleFileChange($(this).next('.input-box'))">
                <?php /* @escapeNotVerified */ echo __('Change') ?>
            </a>&nbsp;
            <?php if (!$_option->getIsRequire()): ?>
                <input type="checkbox" onclick="opFile<?php /* @escapeNotVerified */ echo $_rand; ?>.toggleFileDelete($(this), $(this).next('.input-box'))" price="<?php /* @escapeNotVerified */ echo $block->getCurrencyPrice($_option->getPrice(true)) ?>"/>
                <span class="label"><?php /* @escapeNotVerified */ echo __('Delete') ?></span>
            <?php endif; ?>
        <?php endif; ?>
        <div class="input-box" <?php echo $_fileExists ? 'style="display:none"' : '' ?>>
            <!-- ToDo UI: add appropriate file class when z-index issue in ui dialog will be resolved  -->
            <input type="file" name="<?php /* @noEscape */ echo $_fileName; ?>" class="product-custom-option<?php echo $_option->getIsRequire() ? ' required-entry' : '' ?>" price="<?php /* @escapeNotVerified */ echo $block->getCurrencyPrice($_option->getPrice(true)) ?>" <?php echo $_fileExists ? 'disabled="disabled"' : '' ?>/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $_fieldNameAction; ?>" value="<?php /* @escapeNotVerified */ echo $_fieldValueAction; ?>" />

            <?php if ($_option->getFileExtension()): ?>
                <div class="admin__field-note">
                    <span><?php /* @escapeNotVerified */ echo __('Compatible file extensions to upload')?>: <strong><?php /* @escapeNotVerified */ echo $_option->getFileExtension() ?></strong></span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeX() > 0): ?>
                <div class="admin__field-note">
                    <span><?php /* @escapeNotVerified */ echo __('Maximum image width')?>: <strong><?php /* @escapeNotVerified */ echo $_option->getImageSizeX() ?> <?php /* @escapeNotVerified */ echo __('px.')?></strong></span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeY() > 0): ?>
                <div class="admin__field-note">
                    <span><?php /* @escapeNotVerified */ echo __('Maximum image height')?>: <strong><?php /* @escapeNotVerified */ echo $_option->getImageSizeY() ?> <?php /* @escapeNotVerified */ echo __('px.')?></strong></span>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
